<template>
  <div>
    <el-row :gutter="16">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="109px"
               label-position="left">
        <el-col :span="12">
          <el-form-item label="楼盘名称" prop="field101">
            <el-input v-model="formData.field101" placeholder="请输入楼盘名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>


        <el-col :span="12">
          <el-form-item label="" prop="field103">
            <el-button type="primary" icon="el-icon-search" size="medium"> 添加楼盘 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="" prop="field105">
            <el-radio v-model="radio" label="1" @change="zheng">整租</el-radio>
            <el-radio v-model="radio" label="2" @change="he">合租</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="field124">
            <el-radio-group v-model="formData.field124" size="medium">
              <el-radio v-for="(item, index) in field124Options" :key="index" :label="item.value"
                        :disabled="item.disabled">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="楼栋号" prop="field117">
            <el-input v-model="formData.field117" placeholder="请输入楼栋号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单元号" prop="field118">
            <el-input v-model="formData.field118" placeholder="请输入单元号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="门牌号" prop="field116">
            <el-input v-model="formData.field116" placeholder="请输入门牌号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="室" prop="field119">
            <el-select v-model="formData.field119" placeholder="请选择室" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field119Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="厅" prop="field120">
            <el-select v-model="formData.field120" placeholder="请选择厅" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field120Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="装修情况" prop="field121">
            <el-select v-model="formData.field121" placeholder="请选择装修情况" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field121Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="楼层" prop="field122">
            <el-input v-model="formData.field122" placeholder="楼层" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="共多少层" prop="field123">
            <el-input v-model="formData.field123" placeholder="共多少层" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="设置管家" prop="field125">
            <el-select v-model="formData.field125" placeholder="请设置管家" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field125Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="房产面积" prop="field126">
            <el-input v-model="formData.field126" placeholder="请输入房产面积" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租金" prop="field127" v-if="this.showPri">
            <el-input v-model="formData.field127" placeholder="请输入租金" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="付款方式     押" prop="field128">
            <el-select v-model="formData.field128" placeholder="请选择押" clearable
                       :style="{width: '100%'}">
              <el-option v-for="(item, index) in field128Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="付" prop="field129">
            <el-select v-model="formData.field129" placeholder="请选择付" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in field129Options" :key="index" :label="item.label"
                         :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="公共配套" prop="field101">
            <el-checkbox-group v-model="formData.field101">
              <el-checkbox v-for="(item, index) in field101Options" :key="index" :label="item.value"
                           :disabled="item.disabled">{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房间配套" prop="field102" v-if="this.showPri">
            <el-checkbox-group v-model="formData.field102" size="medium">
              <el-checkbox v-for="(item, index) in field102Options" :key="index" :label="item.value"
                           :disabled="item.disabled">{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="房间区域图片" prop="field103" required v-if="this.showPri">
            <el-upload ref="field103" :file-list="field103fileList" :action="field103Action"
                       :before-upload="field103BeforeUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公共区域图片" prop="field104" required>
            <el-upload ref="field104" :file-list="field104fileList" :action="field104Action"
                       :before-upload="field104BeforeUpload">
              <el-button size="small" type="primary" icon="el-icon-upload">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="房源介绍" prop="field105">
            <el-input v-model="formData.field105" type="textarea" placeholder="请输入房源介绍"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item label="" prop="field106">
            <el-button type="primary" icon="el-icon-search" size="medium"> 提交 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="" prop="field107">
            <el-button type="primary" icon="el-icon-search" size="medium">返回 </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24" style="width: 200px;height: 200px">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>



  </div>
</template>
<script>
import {listUser,listGong,listFang} from "@/api/housings/add/addfen";
import demo from "@/views/housing/ditu/index"

export default {
  components: {
    'Demo' : demo
  },
  props: [],
  data() {
    return {
      radio:1,
      showPri:false,
      formData: {
        field101: [],
        field103: undefined,
        field105: undefined,
        field124: undefined,
        field117: undefined,
        field118: undefined,
        field116: undefined,
        field119: undefined,
        field120: undefined,
        field121: undefined,
        field122: undefined,
        field123: undefined,
        field125: undefined,
        field126: undefined,
        field127: undefined,
        field128: undefined,
        field129: undefined,
        field109: [],
        field102: [],
        field110: null,
        field104: null,
        field111: undefined,
        field106: undefined,
        field107: undefined,
      },
      rules: {
        field109: [{
          required: true,
          message: '请输入楼盘名称',
          trigger: 'blur'
        }],
        field110: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        field124: [{
          required: true,
          message: '不能为空',
          trigger: 'change'
        }],
        field117: [{
          required: true,
          message: '请输入楼栋号',
          trigger: 'blur'
        }],
        field118: [{
          required: true,
          message: '请输入单元号',
          trigger: 'blur'
        }],
        field116: [{
          required: true,
          message: '请输入门牌号',
          trigger: 'blur'
        }],
        field119: [{
          required: true,
          message: '请选择室',
          trigger: 'change'
        }],
        field120: [{
          required: true,
          message: '请选择厅',
          trigger: 'change'
        }],
        field121: [{
          required: true,
          message: '请选择装修情况',
          trigger: 'change'
        }],
        field122: [{
          required: true,
          message: '楼层',
          trigger: 'blur'
        }],
        field123: [{
          required: true,
          message: '共多少层',
          trigger: 'blur'
        }],
        field125: [{
          required: true,
          message: '请设置管家',
          trigger: 'change'
        }],
        field126: [{
          required: true,
          message: '请输入房产面积',
          trigger: 'blur'
        }],
        field127: [{
          required: true,
          message: '请输入租金',
          trigger: 'blur'
        }],
        field128: [{
          required: true,
          message: '请选择付款方式       押',
          trigger: 'change'
        }],
        field129: [{
          required: true,
          message: '请选择付',
          trigger: 'change'
        }],
        field101: [{
          required: true,
          type: 'array',
          message: '请至少选择一个field101',
          trigger: 'change'
        }],
        field102: [{
          required: true,
          type: 'array',
          message: '请至少选择一个field102',
          trigger: 'change'
        }],
        field105: [{
          required: true,
          message: '请输入房源介绍',
          trigger: 'blur'
        }],
      },
      field103Action: 'http://localhost:7002/priture/upload',
      field103fileList: [],
      field104Action: 'http://localhost:7002/priture/upload',
      field104fileList: [],
      field105Options: [],
      field124Options: [{
        "label": "已出租",
        "value": 1
      }, {
        "label": "未出租",
        "value": 2
      }],
      field119Options: [{
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }, {
        "label": "4",
        "value": 4
      }, {
        "label": "5",
        "value": 5
      }, {
        "label": "6",
        "value": 6
      }, {
        "label": "7",
        "value": 7
      }, {
        "label": "8",
        "value": 8
      }, {
        "label": "9",
        "value": 9
      }],
      field120Options: [{
        "label": "0",
        "value": 0
      }, {
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }],
      field121Options: [{
        "label": "精装",
        "value": 0
      }, {
        "label": "简装",
        "value": 1
      }, {
        "label": "毛坯",
        "value": 2
      }],
      field125Options: [],
      field128Options: [{
        "label": "0",
        "value": 0
      }, {
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }],
      field129Options: [{
        "label": "1",
        "value": 1
      }, {
        "label": "2",
        "value": 2
      }, {
        "label": "3",
        "value": 3
      }, {
        "label": "4",
        "value": 4
      }, {
        "label": "5",
        "value": 5
      }, {
        "label": "6",
        "value": 6
      }],
      field101Options: [],
      field102Options: [],
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getuser();
    this.getgong();
    this.getfang()
  },
  mounted() {},
  methods: {
    chuan(){

    },
    getfang(){
      listFang(this.queryParams).then(response => {
        this.field102Options = response;
        this.loading = false;
      });
    },
    getgong(){
      listGong(this.queryParams).then(response => {
        console.log(response)
        this.field101Options = response;
        console.log(this.field101Options)
        this.loading = false;
      });
    },
    zheng(){
      this.showPri=true
      console.log(this.showPri)
    },
    he(){
      this.showPri=false
      console.log(this.showPri)
    },
    getuser(){
      listUser(this.queryParams).then(response => {
        // console.log(response)
        this.field125Options = response.rows;
        this.loading = false;
      });
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单




      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field103BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    field104BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
  }
}

</script>
<style>
.el-upload__tip {
  line-height: 1.2;
}

</style>
